'use strict';

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  ScrollView,
  TouchableOpacity,
  Text,
  Keyboard
} from 'react-native';
import {SearchBar} from 'react-native-elements';
import BasePage from '../common/BasePage';
import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import CommonStyles from '../../common/CommonStyles';
import TImage from '../../components/TImage';
import UserRequestSaerchListAction from '../../actions/user/UserRequestSaerchListAction';
import HeartLoveRquestSelfDataAction from '../../actions/heart/HeartLoveRquestSelfDataAction';
import SearchItemView from './SearchItemView';

const titleArr=[{type:'all',name:'全部',keyType:'total_page'},
    {type:'news',name:'新闻',keyType:'new_page'},
    {type:'activities',name:'活动',keyType:'activity_page'},
    {type:'lovers',name:'爱情',keyType:'lover_page'},
    {type:'posts',name:'圈子',keyType:'post_page'},
    {type:'innovation',name:'创新创效',keyType:'innovation_page'}]

class MainSearchView extends BasePage {
  constructor(props) {
    super(props);
    this.keyWord='';
    this.state.data={};
    this._leave = false;
    this.state.select=0;
  }
  componentDidMount() {
    new HeartLoveRquestSelfDataAction().call(this);
  }

  _dealEnterPage() {
      
  }
  _renderSearchBg() {
    return(
      <View style={{height:SizeUtils.translateDesignHeightToCode(100),
          paddingLeft:10,
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#f2f2f2",
          flexDirection:"row", alignItems:"center"}}>
        <SearchBar
          noIcon = {true}
          containerStyle = {this._getSearchBarContainerStyle()}
          inputStyle = {{padding:0,height:SizeUtils.translateDesignHeightToCode(62), color:"#000000",
            backgroundColor:"#eeeeee", marginLeft:0, marginRight:0,
            marginTop:2, marginBottom:0, paddingRight:0, paddingLeft:SizeUtils.translateDesignWidthToCode(56),
            fontSize:SizeUtils.translateFontSizeToCode(28)}}
          multiline = {false}
          onSubmitEditing = {() => this._onSubmitEditing()}
          value = {this.state.searchText}
          underlineColorAndroid="transparent"
          returnKeyType = "search"
          blurOnSubmit={true}
          // lightTheme = {true}
          onChangeText={this._onSearchBarChange.bind(this)}
          clearButtonMode={'always'}
          enablesReturnKeyAutomatically={true}
          placeholder='搜点什么吧' />
        <TouchableOpacity onPress={this._onPressCancel.bind(this)} style={{paddingLeft:SizeUtils.translateDesignWidthToCode(26)}}>
          <Text style={{color:"#42a1fa", fontSize:SizeUtils.translateFontSizeToCode(30),}}>
            取消
          </Text>
        </TouchableOpacity>
        <View style={{position:"absolute",
            top:(SizeUtils.translateDesignHeightToCode(100) - SizeUtils.translateDesignWidthToCode(24))/2,
            left:SizeUtils.translateDesignWidthToCode(30)}}>
        <TImage source={require("../../../resource/images/workhard/search_gray.png")}
          style={{width:28, height:28, }}/>
        </View>
      </View>
    )
  }
  _onSearchBarChange(data) {
    this.setState({
      searchText:data,
    })
  }
  _onSubmitEditing() {
    if (this.state.searchText.length>0) {
      this.keyWord=this.state.searchText;
      new UserRequestSaerchListAction().call(this, {page:1, page_size:10,key:this.state.searchText});
    }
  }
  _onPressCancel() {
    this.keyWord='';
    this.setState({
        data:{},
        searchText:'',
        select:0,
      })
    this.goBack();
  }
  _getSearchBarContainerStyle() {
    return {width:SizeUtils.translateDesignWidthToCode(620), borderTopWidth:0,borderBottomWidth:0,
      height:SizeUtils.translateDesignHeightToCode(62),paddingLeft:-4,backgroundColor:"#00000000",};
  }
  _renderHeaderView(data){
    return(
      <View>
      <View style={{height:SizeUtils.translateDesignHeightToCode(90),
                flexDirection:"row", alignItems:"center"}}>
      {titleArr.map((item,index)=>{
        return(
          <TouchableOpacity key={item.type} style={{
            height:SizeUtils.translateDesignHeightToCode(90),
            width:SizeUtils.getWindowSize().width/titleArr.length,
            alignItems: 'center',justifyContent: 'center',}}
            onPress={()=>{this.setState({select:index});}}>
            <Text style={{fontSize:14,color:this.state.select==index?'#ee3535':'#000'}} >{item.name}</Text>
            <Text style={{fontSize:12,marginTop:2,color:'#999999'}}>{'('+(data[item.keyType]||0)+')'}</Text>
            {
              index!==titleArr.length-1?
              <View style={{top:15,backgroundColor:'#eeeeee',right:0,width:1,bottom:15,position:'absolute'}}/>:null
            }
          </TouchableOpacity>
          );
      })}
      </View>
      <View style={{height:10,backgroundColor:'#eeeeee'}}/>
      </View>);
  }
  _renderConentView(){
    const num1=this.state.data[titleArr[1].type]&&this.state.data[titleArr[1].type].length||0;
    const num2=this.state.data[titleArr[2].type]&&this.state.data[titleArr[2].type].length||0;
    const num3=this.state.data[titleArr[3].type]&&this.state.data[titleArr[3].type].length||0;
    const num4=this.state.data[titleArr[4].type]&&this.state.data[titleArr[4].type].length||0;
    const num5=this.state.data[titleArr[5].type]&&this.state.data[titleArr[5].type].length||0;
    if (this.state.select==0) {
      if (num1+num2+num3+num4+num5===0) {
        return this._renderEmpty();
      }
      return (<View>
        {num1>0?this._renderNewsConent(1):null}
        {num2>0?this._renderNewsConent(2):null}
        {num3>0?this._renderNewsConent(3):null}
        {num4>0?this._renderNewsConent(4):null}
        {num5>0?this._renderNewsConent(5):null}
      </View>)
    }
    const temp=this.state.data[titleArr[this.state.select].type]&&this.state.data[titleArr[this.state.select].type].length||0;
    if (temp==0) {
      return this._renderEmpty();
    }
    return this._renderNewsConent(this.state.select);
    return(<View/>)
  }
   _renderHeader(title,type) {
    return (
      <View style={{flexDirection:"row", paddingLeft:SizeUtils.translateDesignWidthToCode(30),
          paddingRight:SizeUtils.translateDesignWidthToCode(30),
          paddingBottom:SizeUtils.translateDesignHeightToCode(20), justifyContent:"space-between",
          paddingTop:SizeUtils.translateDesignHeightToCode(32 - 8), alignItems:"center",
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#eeeeee",}}>
        <View style={{flexDirection:"row", alignItems:"center",}}>
          <TImage source={require("../../../resource/images/home/biaotitle.png")} style={{width:8, height:30}}/>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333",
            marginLeft:SizeUtils.translateDesignWidthToCode(8), borderWidth:0,
            backgroundColor:"#00000000",
            fontWeight:"bold"}} >
            {title}
          </Text>
        </View>
        <TouchableOpacity onPress={this._onPressMore.bind(this,type,title)}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(24), color:"#888888",}}>
            {'更多内容 >'}
          </Text>
        </TouchableOpacity>
      </View>
    )
  }
  _onPressMore(type,name) {
    if (this.state.data[type]) {
       this.gotoPage(Config.pages.search_list,{data:this.state.data[type],loveData:this.state.loveData,title:name,type:type,keyWord:this.keyWord})  
    }
  }
  _renderNewsConent(number){
    let arr =this.state.data[titleArr[number].type]||[];
    arr=arr.slice(0,Math.min(4,arr.length));
    return(<View>
      {this._renderHeader(titleArr[number].name,titleArr[number].type)}
      {arr.map(
            (data, index) => {
              return this._renderItem(data, index,titleArr[number].type);
            }
        )}
    </View>);
  }
  _renderItem(data, index,type) {
      return(<SearchItemView key={index} pageData={this.props.pageData} loveData={this.state.loveData} data={data} index={index} type={type} keyWord={this.keyWord}/>)
  }
  _renderEmpty() {
    var y = (SizeUtils.getWindowSize().height - SizeUtils.translateDesignWidthToCode(220))/2;
    return (
      <View style={{width:SizeUtils.getWindowSize().width, flexDirection:"row", justifyContent:"center",
        backgroundColor:"#ffffff",alignItems:"center",
         left:0, top:y}}>
        <TImage source={require("../../../resource/images/common/weifabu.png")} style={{
          width:220, height:220,
        }} />
      </View>
    )
  }
  render() {
    const { data } =this.state;
    const totnum=data.total_page||0;
    return (
       <View style={{width:SizeUtils.getWindowSize().width,
        height:SizeUtils.getWindowSize().height,
        paddingTop:Config.statusBarHeight,
        backgroundColor:"#fff", flexDirection:"column"}}>
        	{this._renderSearchBg()}
          {data.total_page!=undefined?this._renderHeaderView(data):null}
          <ScrollView style={{flex:1}}>
            {this._renderConentView()}
          </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({

});


export default MainSearchView;
